<template>
  <div
    class="codePanel"
    style="background-color: rgb(255, 255, 255); padding: 10px"
  >
    <div
      class="codeControl"
      style="
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
        padding-bottom: 10px;
      "
    >
      <div
        class="leftControl"
        style="
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <span
          >语言选择<a-select
            ref="select"
            v-model:value="value1"
            style="width: 100px"
            size="small"
            @focus="focus"
            @change="handleChange"
          >
            <a-select-option value="C">C</a-select-option>
            <a-select-option value="C++">C++</a-select-option>
            <a-select-option value="Java">Java</a-select-option>
            <a-select-option value="Python">Python</a-select-option>
          </a-select></span
        >

        <a-button size="small" style="margin-left: 8px">
          <template #icon>
            <UndoOutlined />
          </template>
        </a-button>
      </div>
      <div class="rightControl" style="height: 30px">
        <span style="line-height: 30px"
          ><span style="padding-right: 8px">主题选择</span
          ><a-select
            ref="select"
            v-model:value="value2"
            style="width: 100px"
            size="small"
            @focus="focus"
            @change="handleChange"
          >
            <a-select-option value="Dark">Dark</a-select-option>
            <a-select-option value="Light">Light</a-select-option>
            <a-select-option value="Github">Github</a-select-option>
          </a-select></span
        >
      </div>
    </div>
    <div>
      <code-mirror
        basic
        :lang="lang"
        v-model="codeVal"
        class="cm-editor"
        :theme="theme"
      />
    </div>
    <div
      class="bottomSubmit"
      style="
        display: flex;
        justify-content: space-between;
        padding: 10px 0px 3px 0px;
      "
    >
      <div class="hitSubmit">这块写提交信息</div>
      <button>
        <span>Submit</span>
      </button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import CodeMirror from "vue-codemirror6";
import { json } from "@codemirror/lang-json";
import type { SelectProps } from "ant-design-vue";
import { UndoOutlined } from "@ant-design/icons-vue";
const value1 = ref("C");
const value2 = ref("Light");
const options1 = ref<SelectProps["options"]>([
  {
    value: "jack",
    label: "Jack",
  },
  {
    value: "lucy",
    label: "Lucy",
  },
  {
    value: "disabled",
    label: "Disabled",
    disabled: true,
  },
  {
    value: "yiminghe",
    label: "Yiminghe",
  },
]);
const initJson = {
  name: `maybaby`,
  year: 25,
  weight: 45,
  height: 165,
};
const focus = () => {
  console.log("focus");
};

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
// 初始化
let codeVal = ref("");
// 转成json字符串并格式化
codeVal.value = JSON.stringify(initJson, null, "\t");

// json
const lang = json();
// 主题样式设置
const theme = {
  "&": {
    color: "white",
    backgroundColor: "#034",
  },
  ".cm-content": {
    caretColor: "#0e9",
  },
  "&.cm-focused .cm-cursor": {
    borderLeftColor: "#0e9",
  },
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#074",
  },
  ".cm-gutters": {
    backgroundColor: "#045",
    color: "#ddd",
    border: "none",
  },
};
onMounted(() => {});
</script>

<style>
.main {
  width: 100%;
  height: 100%;
  min-height: 400px;
}
/* required! */
.cm-editor {
  height: 100%;
  min-height: 400px;
}
</style>
